<script type="text/javascript">

    var model = {
        renderAt: '#containerDemo',
        title: 'Tabs Demos',
        demos: [
            {
                title: 'Simple Tabs',
                desc: 'With few lines of code you could make tabs. You can try more options on the fly!',
                html: {url: 'templates/ui.tabs.ex1.html'},
                destroy: '$("tabsEx1 > ul").tabs("destroy");',
                options: [
                    {
                        desc: 'First tab active by default',
                        source: '$("#tabsEx1 > ul").tabs();'
                    },
                    {
                        desc: 'Start With Custom Tab',
                        source: '$("#tabsEx1 > ul").tabs({selected:1});'
                    },
                    {
                        desc: 'Use a slide effect to switch tabs',
                        source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle" } });'
                    },
                    {
                        desc: 'Use a fade effect to switch tabs',
                        source: '$("#tabsEx1 > ul").tabs({ fx: { opacity: "toggle" } });'
                    },
                    {
                        desc: 'Use a combined slide and fade effect to switch tabs',
                        source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle", opacity: "toggle" } });'
                    },
                    {
                        desc: 'Define event to switch tabs (mouseover)',
                        source: '$("#tabsEx1 > ul").tabs({  event: "mouseover" });'
                    }
                ]
            }

        ]

    };

    $(function() {

        uiRenderDemo(model);

    });

</script>